@totalHeight: 10px; //总高度=圆形按钮高度
@trackHeight: 4px; //轨道高度
@leftDefaultBgc: #61bd12; //圆形按钮以及左侧背景默认色
@leftPrimaryBgc: #4a8b10; //圆形按钮以及左侧背景选中色
@rightDefaultBgc: #eee; //右侧背景默认色
@rightPrimaryBgc: #bebbbb; //右侧背景选中色

.slider {
  display: flex;
  align-items: center;
  font-size: 13px;
  .left-label {
    margin-right: 8px;
  }
  .right-label {
    margin-left: 8px;
  }
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 200px;
    height: @totalHeight;
  }
  input[type="range"]:hover {
    input[type="range"]::-webkit-slider-runnable-track {
      background-color: @rightPrimaryBgc;
    }
    input[type="range"]::-webkit-slider-thumb {
      background-color: @leftPrimaryBgc;
      border-image: linear-gradient(@leftPrimaryBgc, @leftPrimaryBgc) 0 fill /
        ((@totalHeight / 2) - (@trackHeight / 2)) (@totalHeight / 2)
        ((@totalHeight / 2) - (@trackHeight / 2)) 0 / 0px 0px 0 2000px;
    }
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: @trackHeight;
    background: @rightDefaultBgc;
  }
  input[type="range"]::-webkit-slider-container {
    height: @totalHeight;
    overflow: hidden;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: @totalHeight;
    height: @totalHeight;
    border-radius: 50%;
    background-color: @leftDefaultBgc;
    border: 1px solid #ddd;
    margin-top: -((@totalHeight / 2) - (@trackHeight / 2));
    border-image: linear-gradient(@leftDefaultBgc, @leftDefaultBgc) 0 fill /
      ((@totalHeight / 2) - (@trackHeight / 2)) (@totalHeight / 2)
      ((@totalHeight / 2) - (@trackHeight / 2)) 0 / 0px 0px 0 2000px;
  }
  input[type="range"]::-webkit-slider-thumb::after {
    content: "123";
  }
}
